<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
</head>
<body>
<!--
    1/vue对象的生命周期
        1)初始化显示
            * beforeCreate()
            * created()
            * beforeMount()
            * mounted()
        2)更新显示: this.xxx = value
            * beforeUpdate()
            * updated()
        3)销毁vue实例: vm.$destroy()
            * beforeDestroy()
            * destroyed()
    2/常用的生命周期方法
        mounted():发送ajax请求，启动定时器等异步任务
        beforeDestroy():做收尾工作，例如：清除定时器
-->


<div id="test">
    <button @click="destroyVM">destroy vm</button>
    <p v-show="isShow">数据库系统概论</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({

        el:'#test',
        data:{
            isShow:true,
        },
        /*~~~~~~ 1 ~~~~~~~~~~~~~~~~~初始化阶段*/
        beforeCreate(){
            console.log('beforeCreate()')
        },
        created(){
            console.log('created()')
        },
        beforeMount(){
            console.log('beforeMount()')
        },
        mounted(){ /*初始化显示之后立即调用1次*/
            /*循环计时器*/
            this.intervalId = setInterval(() => {
                console.log('sssssssssssssssssssssssss')

                /*注意！！！：这里使用()=> 可以继续使用this*/
                this.isShow = !this.isShow;
            },1000)
        },
        /*~~~~~~ 2 ~~~~~~~~~~~~~~~~~更新阶段*/
        beforeUpdate(){
            console.log('beforeUpdate()')
        },
        updated(){
            console.log('updated()')
        },

        /*~~~~~~ 3 ~~~~~~~~~~~~~~~~~死亡阶段*/
        beforeDestroy(){ /*死亡之前调用1次*/
            /*清楚计时器*/
            clearInterval(this.intervalId)
        },
        destroyed(){
            console.log('destroyed()')
        },
        methods:{
            destroyVM(){
                /*干掉vm*/
                this.$destroy()
            }
        }
    })


</script>
</body>
</html>